<template>
<!--    订单管理  -->
    <div class="order">
<!--        这是订单管理-->
        <div>
            <div style="margin-bottom: 10px">
                <el-radio-group v-model="radio2" size="medium" @input="changeStatus">
                    <el-radio-button label="帮我买" ></el-radio-button>
                    <el-radio-button label="帮我取"></el-radio-button>
                    <el-radio-button label="帮我送"></el-radio-button>
                </el-radio-group>
            </div>
        </div>

        <div class="search">
            <div class="search_store">
                <p>用户手机号:</p>
                <input type="text">
            </div>
            <div class="search_store">
                <p>下单人姓名:</p>
                <input type="text">
            </div>
            <div class="search_store">
                <p>状态:</p>
                <el-cascader v-model="value"
                        :options="options" :placeholder="options[0].label"
                        @change="handleChange"></el-cascader>
            </div>
            <div class="search_store">
                <p>所属门店:</p>
                <input type="text">
            </div>
            <div class="block">
                <span class="demonstration">下单日期:</span>
                <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <div class="search_buttom">
                <el-button type="primary">搜索</el-button>
            </div>
        </div>

<!--        表格  -->

        <router-view></router-view>

    </div>


</template>

<script>
    export default {
        name: "OrderManagement",
        data: function(){
            return {
                orderData: "",
                radio2: "帮我买",
                value1: ['',''],
                options: [
                    { value: 'quanbu', label: '全部'},
                    { value: 'yiquxiao', label: '已取消'},
                    { value: 'daijiedan', label: '待接单'},
                    { value: 'jiedanpeishong', label: '已接单配送中'},
                    { value: 'yiwanchen', label: '已完成'},
                ],
                helpType: 3, // == orderType 订单类型:[帮我买, 帮我取, 帮我送 ] 点击切换
            }
        },
        created() {
            this.axios.request("deliveryOrder/queryDeliveryOrderList", {
                params: {
                    pageNum: 1,
                    pageSize: 10,
                    orderType: 3,
                    userPhone: '',
                    shopName: '',
                    status: 0,
                    userName: '',
                    startTime: '',
                    endTime: '',
                }
            }).then((res) => {
                this.orderData = res.data;
                console.log(this.orderData)

            }).catch((err) => {
                console.log(err)
            });
        },
        methods: {
            handleChange(value) {
                console.log(value);
            },
            changeStatus(){
                switch (this.radio2) {
                    case "帮我买":
                        this.helpType = 3;
                        this.$router.push('/bangmai/order').catch(()=>{})
                        break;
                    case "帮我取":
                        this.helpType = 2;
                        this.$router.push('/bangmai/order/helpmetake').catch(()=>{})
                        break;
                    case "帮我送":
                        this.helpType = 1;
                        this.$router.push('/bangmai/order/helpmegive').catch(()=>{})
                        break;
                }

            }
        }
    }
</script>

<style scoped>

    .order{
        width: 97%;
        padding: 1.5%;
        /*background-color: #ffaa69;*/
    }
    .search{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
    }
    .search_store{
        height: 42px;
        /*background-color: #009E94;*/
        margin-bottom: 20px;
        margin-right: 20px;
    }
    .search_store>p{
        float: left;
        line-height: 40px;
        margin-right: 10px;
    }
    .search_store>input{
        width: 190px;
        line-height: 40px;
        float: left;
        outline: none;
        padding-left: 10px;
        border: 0;
        border-radius: 5px;
    }
    .block{
        line-height: 40px;
        margin-right: 20px;
    }
    .demonstration{
        margin-right: 10px;
    }


</style>